import { useImageStore } from '@/domain/correction/hooks/image';
import { ECurrentOperation } from '@/domain/correction/types/jobs/images';
import { computed, defineComponent, onMounted, onUnmounted, reactive, Ref, ref, toRaw } from 'vue';
import Styles from './index.module.scss';
export default defineComponent({
  name: 'correctEditor',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    stu_id: {
      type: Boolean,
      default: false
    }
  },
  setup() {
    /**图像工具 */
    const store = useImageStore();
    const activeManage = computed(() => store.state.activeImageManages?.im);
    const active = computed(() => (status: ECurrentOperation) => activeManage.value?.currentOperation === status);
    /**ui工具 */
    return () => (
      <>
        <div class="w-full fixed bottom-0 pt-5 pb-10  bg-white font-regular">
          <div class={Styles['tool']}>
            <div
              class={Styles['bar'] + (active.value(ECurrentOperation.backspacing) ? ' text-blue-450' : '')}
              onClick={() => {
                activeManage.value?.flyback();
                activeManage.value?.backspacing();
              }}
            >
              <i class={' iconfont icon-a-bianzu5 '}></i>
              <span>撤回</span>
            </div>
            <div
              class={Styles['bar'] + (active.value(ECurrentOperation.brush) ? ' text-blue-450' : '')}
              onClick={() => {
                if (active.value(ECurrentOperation.brush)) {
                  activeManage.value?.flyback();
                } else {
                  activeManage.value?.flyback();
                  activeManage.value?.brush();
                }
              }}
            >
              <i class={'iconfont icon-bianzu'}></i>
              <span>涂鸦</span>
            </div>
            <div
              class={Styles['bar'] + (active.value(ECurrentOperation.mark) ? ' text-blue-450' : '')}
              onClick={() => {
                activeManage.value?.mark();
              }}
            >
              <i class={'iconfont icon-a-bianzu9 '}></i>
              <span>打分</span>
            </div>
            <div
              class={Styles['bar'] + (active.value(ECurrentOperation.text) ? ' text-blue-450' : '')}
              onClick={() => {
                if (active.value(ECurrentOperation.text)) {
                  activeManage.value?.flyback();
                } else {
                  activeManage.value?.flyback();
                  activeManage.value?.setText();
                }
              }}
            >
              <i class={'iconfont icon-a-bianzu31'}></i>
              <span>文字</span>
            </div>
            <div
              class={Styles['bar'] + (active.value(ECurrentOperation.rotate) ? ' text-blue-450' : '')}
              onClick={() => {
                if (active.value(ECurrentOperation.rotate)) {
                  activeManage.value?.flyback();
                } else {
                  activeManage.value?.flyback();
                  activeManage.value?.rotate();
                }
              }}
            >
              <i class={'iconfont icon-a-bianzu41'}></i>
              <span>旋转</span>
            </div>
            <div
              class={Styles['bar'] + (active.value(ECurrentOperation.chartlet) ? ' text-blue-450' : '')}
              onClick={() => {
                if (active.value(ECurrentOperation.chartlet)) {
                  activeManage.value?.flyback();
                  return;
                }
                activeManage.value?.flyback();
                activeManage.value?.chartlet();
              }}
            >
              <i class={'iconfont icon-tiezhi '}></i>
              <span>贴纸</span>
            </div>
            <div
              class={Styles['bar'] + (active.value(ECurrentOperation.prepare) ? ' text-blue-450' : '')}
              onClick={() => {
                //activeManage.value?.chartlet()
                activeManage.value?.flyback();
                activeManage.value?.prepare();
              }}
            >
              <i class={'iconfont icon-a-bianzu10'}></i>
              <span>备课</span>
            </div>
            <div
              class={Styles['bar'] + (active.value(ECurrentOperation.answers) ? ' text-blue-450' : '')}
              onClick={() => {
                activeManage.value?.flyback();
                activeManage.value?.answers();
              }}
            >
              <i class={'iconfont icon-a-bianzu6'}></i>
              <span>答案</span>
            </div>
          </div>
        </div>
      </>
    );
  }
});
